<template>
	<view class="template-edit tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
		  <view slot="back" class='tn-custom-nav-bar__back'
		    @click="goBack">
		    <text class='icon tn-icon-left'></text>
		    <text class='icon tn-icon-home-capsule-fill'></text>
		  </view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
			  <text class="tn-text-bold tn-text-xl tn-color-black"></text>
			</view>
		</tn-nav-bar>

		<template v-if="show == 1">
			<view class="tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

				<!-- 视频地址开始 -->
				<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;height: auto;">
					<textarea placeholder="支持抖音、快手、西瓜视频、今日头条、微视、火山视频、皮皮虾、小红书、知乎、Tiktok、Instagram等平台视频链接" maxlength="-1" @input="inputUrl" :value="videoCrawlUrl"
						placeholder-style="color:#AAAAAA; width:100%;" :auto-height="true" style="height: 100rpx;white-space: pre-wrap;word-wrap: break-word;margin-right: 30rpx;padding-right: 30rpx;"></textarea>
				</view>
				<!-- 视频地址结束 -->
				
				<!-- 视频解析结果开始 -->
				<view style="display: flex;justify-content: center;width: 100%;">
					<video id="myVideo" :src="videoInfo.video_url" controls :poster="videoInfo.cover_url" :title="videoInfo.title" style="width: 96% !important;border-radius: 14rpx;height: 350rpx !important;" object-fit="contain"></video>
				</view>
				<!-- 视频解析结果结束 -->

				<!-- 悬浮按钮开始 -->
				<view class="tn-flex tn-footerfixed" v-if="accountStae">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<view class="" style="display: flex; justify-content: space-between;">
							<tn-button backgroundColor="#FBBD12" padding="40rpx 0" width="300rpx" fontBold @click="downloadUrl">
								<text class="tn-color-white">下 载 视 频</text>
							</tn-button>
							<tn-button backgroundColor="#3668fc" padding="40rpx 0" width="300rpx" fontBold @click="submit">
								<text class="tn-color-white">解 析 视 频</text>
							</tn-button>
						</view>
						<view class="tn-padding-xs tn-text-sm" style="text-align: right;">
							<text class="tn-icon-tip-fill tn-color-gray tn-padding-right-xs"></text>
							<text class="tn-color-gray">扣减 200积分</text>
						</view>
					</view>
				</view>
				<!-- 悬浮按钮结束 -->
				
				<!-- 视频相关信息开始 -->
				<view style="margin-bottom: 20rpx;">
					<!-- <tn-list-view title="视频信息" :card="true" unlined="all" style="font-size: 30rpx;font-weight: 500;"> -->
							<tn-list-cell @click="setClipboardData(1)"><text class="tn-icon-copy tn-color-gray tn-padding-right-xs"></text>视频标题: {{videoInfo.title}}</tn-list-cell>
							<tn-list-cell><text class="tn-icon-time tn-color-gray tn-padding-right-xs"></text>视频时长: {{videoInfo.duration}}</text></tn-list-cell>
							<tn-list-cell><text class="tn-icon-time tn-color-gray tn-padding-right-xs"></text>发布时间: {{videoInfo.time}}</text></tn-list-cell>
							<tn-list-cell @click="downAudioUrl"><text class="tn-icon-download tn-color-gray tn-padding-right-xs"></text>音频链接: {{videoInfo.audio_name}}</tn-list-cell>
					<!-- </tn-list-view> -->
				</view>
				<!-- 视频相关信息结束 -->
				
			</view>
		</template>

		<!-- <view class='tn-tabbar-height'></view> -->
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { authorState } from "@/utils/api/author.js"
	import { configState } from "@/utils/api/sys.js"
	import { videoCrawer } from "@/utils/api/ai.js"
	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		data() {
			return {
				customBtn: true,
				disabled: false,
				show: 2,
				videoCrawlUrl: "3.07 Atr:/ 复制打开抖音，看看【艾田田的作品】这一波走位属实可以。# 王者 # 孙悟空  https://v.douyin.com/UmAfGpN/", // 抓取视频链接地址
				accountStae: true,
				videoInfo: {
					video_url: "https://picture.qqdeveloper.com/static/9467c9fb0738165bd00c1b5d44544951.mp4",
					title: "王者荣耀国服 这一波走位属实可以。# 王者 # 孙悟空",
					cover_url: "https://picture.qqdeveloper.com/static/cover.jpg",
					audio_url: "https://picture.qqdeveloper.com/8e0579de97c576f75d1b79de46b46c73.mp3",
					duration: "00:01:05",
					time: "2023-05-30 01:11:35",
					audio_name: "8e0579de97c576f75d1b79de46b46c73.mp3",
				},
			}
		},
		onLoad() {},
		onShow() {
			this.getSysState()
		},
		methods: {
			getClipboardData() {
				let _that = this
				uni.getClipboardData({
					success: function (res) {
						_that.videoCrawlUrl = res.data
					}
				});
			},
			getSysState () {
				configState({key: "wechat_mini_state"}).then(res => {
					this.show = res.val
					if (res.val == 1) {
						this.getAuthorState()
						this.getClipboardData()
					}
				})
			},
			// 下载视频链接
			downloadUrl() {
				this.$func.downloadVideoFile(this.videoInfo.video_url)
			},
			downAudioUrl() {
				let _that = this
				uni.setClipboardData({
					data: this.videoInfo.audio_url,
					showToast: false,
					success() {
						_that.$func.showToast("音频复制成功,请用浏览器打开下载")
					},fail(res) {
						_that.$func.showToast(res.errMsg)
					}
				})
			},
			setClipboardData(index) {
				let _that = this
				uni.setClipboardData({
					data: index == 1 ? this.videoInfo.title : this.videoInfo.video,
					success() {
						_that.$func.showToast("复制成功")
					},fail(res) {
						_that.$func.showToast(res.errMsg)
					}
				})
			},
			getAuthorState() {
				authorState().then(res => {
						if (res.code == 1) {
							if (res.info.audit_status == 3) {
								this.$func.showToast("认证审核中 请耐心等待")
								this.accountStae = false
								return
							}
							if (res.info.audit_status == 2) {
								this.accountStae = false
								uni.showModal({
									title: '认证提示',
									content: "认证已驳回 请重新认证",
									cancelText: "暂不认证",
									confirmText: "重新认证",
									success: function (res) {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pageA/author/ident"
											})
										}
									}
								})
								return
							}
							if (res.info.is_forbidden == 1) {
								this.accountStae = false
								uni.showModal({
									title: '账号提示',
									content: "账号被禁用 联系客服",
									cancelText: "暂无联系",
									confirmText: "立即联系",
									success: function (res) {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pageA/help/help"
											})
										}
									}
								})
								return
							}
						} else {
							uni.showModal({
								title: '认证提示',
								content: "未认证 请先认证",
								cancelText: "暂不认证",
								confirmText: "立即认证",
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pageA/author/ident"
										})
									}
								}
							})
						}
				})
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				})
			},
			// 视频解析地址
			inputUrl(e) {
				this.videoCrawlUrl = e.detail.value
			},
			// 提交表单
			submit() {
				if (this.videoCrawlUrl == "") {
					this.$func.showToast("解析内容不能为空")
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				videoCrawer({
					url: this.videoCrawlUrl
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						this.videoInfo = res
						this.$func.showToast(res.msg)
					} else {
						this.$func.showToast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {}
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 180rpx;
		height: calc(220rpx + env(safe-area-inset-bottom) / 2);
		height: calc(220rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		// position: fixed;
		width: 100%;
		// bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/
</style>